<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport"
        content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <link rel="stylesheet" type="text/css" href="../../common/style/aui.css" />
    <link rel="stylesheet" type="text/css" href="../../common/style/font-awesome.min.css">
    <link rel="stylesheet" type="text/css" href="../../common/style/select.css">
    <script src="../../common/lib/jquery-1.11.2.min.js"></script>
    <script src="../../common/lib/area.js"></script>
    <script type="text/javascript" src="../../common/js/md5.js"></script>
    <script src="../../common/js/vue.min.js"></script>
    <script src="../../common/js/axios.min.js"></script>
    <script
      type="text/javascript"
      src="../../common/request/request.js?version=1.0.12"
    ></script>
    <script src="./search_js/search-result-brand.js?version=1.0.12"></script>
    <script src="../../common/lib/better-scroll/bscroll.min.js"></script>
    <style>
        /* .second-select li {
            width: 33.33%;
        }
        .aui-list-item-arrow:before {
            border-color: #959AA6;
            top: 1.2rem;
            width: .3rem;
            height: .3rem;
            right: 0;
        } */
        .second-select li a span{
            display: inline-block;
            max-width: 80%;
            white-space: nowrap;
            overflow: hidden;
            vertical-align: bottom;
            text-overflow: ellipsis;
        }
        .loadMore{
            text-align: center;
            margin: .4rem;
        }
        .loadMore .aui-btn{
            font-size: 0.6rem;
            background-color: #38B3FF;
        }
        .third-info #left-area,.third-info .list{
            overflow: hidden;
        }
    </style>
</head>

<body class="layout-w" id="view">
    <div class="select-header aui-clearfix">
        <div class="aui-pull-left" style="width:40%;">
            <a href="search-result-build.html" class="select-index-button">写字楼/园区</a>
        </div>
        <div class="aui-pull-left" style="width:40%;">
            <a href="search-result-community.html" class="select-index-button active">联合办公</a>
        </div>
        <div class="aui-pull-left" style="width: 20%;">
            <a href="entry.html?type=4" class="small-select">
                <i class="fa fa-search"></i>&nbsp;搜索
            </a>
        </div>
    </div>
    <div class="main-select">
        <div class="aui-tab" id="select-tab">
                <a class="aui-tab-item" href="search-result-community.html">按社区显示</a>
                <a class="aui-tab-item aui-active" href="search-result-brand.html">按品牌显示</a>
        </div>
        <div class="select-content">
            <div class="second-select">
                <ul class="aui-clearfix" id="all-select">
                    <li data-type="choose-area"><a href="javascript:;"><span>{{selectBar.area}}</span><i class="fa fa-caret-down"></i></a></li>
                    <li data-type="choose-subway"><a href="javascript:;"><span>{{selectBar.subway}}</span><i class="fa fa-caret-down"></i></a></li>
                    <li data-type="choose-sort"><a href="javascript:;"><span>{{selectBar.sort}}</span><i class="fa fa-caret-down"></i></a></li>
                    <li data-type="choose-select"><a href="javascript:;"><span>筛选</span><i class="fa fa-caret-down"></i></a></li>
                </ul>
            </div>
        </div>
        <div class="third-info" style="display:none;" id="choose-area">
            <div id="left-area">
                <ul>
                    <li :class="query.townId == area.item_id ?'active':''" v-for="area in areaList" :key="area.item_id"><a
                            href="javascript:;" data-type="area-1" @click="getArea(area)" v-html="area.item_name"></a></li>
                </ul>
            </div>
            <div class="list" id="right-area">
                <div id="area-all">
                    <a v-for="business in businessList" :class="query.tradingAreaId == business.item_id ?'active':''"
                        :key="business.item_id" v-html="business.item_name" @click="getbus(business)"></a>
                </div>
            </div>
        </div>
        <div class="third-info" style="display:none;" id="choose-subway">
            <div id="left-area">
                <ul>
                    <li :class="[query.subwayLineId == line.item_id?'active':'']" v-for="line in linesList" :key="line.item_id">
                        <a href="javascript:;" data-type="area-1" @click="getlines(line)" v-html="line.item_name"></a></li>
                </ul>
            </div>
            <div class="list" id="right-area">
                <div id="area-all">
                    <a v-for="linebus in linesbusList" :class="[query.subwayStationId == linebus.item_id?'active':'']"
                        :key="linebus.item_id" v-html="linebus.item_name" @click="getlibus(linebus)"></a>
                </div>
            </div>
        </div>
        <div class="third-info" style="display:none;" id="choose-sort">
            <a href="javascript:;" class="select-all-grey">全部</a>
            <div class="select-all-list-2 main-list-zx aui-clearfix sort-list">
                <div v-for="item in sortList"  @click="sort(item)"><a href="javascript:;" class="">{{item.name}}</a></div>
            </div>
        </div>
        <div class="third-info" style="display:none;" id="choose-select">
            <a href="javascript:;" class="select-all-grey aui-margin-b-10">全部</a>
            <div class="main-list-zx">
                <dl>
                    <dt>类型</dt>
                    <dd>
                        <a href="javascript:;" :class="[query.type == item.id?'active':'']" v-for="item in type"
                            @click="handleChooseSelect('type',item)" class="" v-html="item.name"></a>
                    </dd>
                </dl>
                <dl>
                    <dt>所在地</dt>
                    <dd>
                        <a href="javascript:;" :class="[query.placeType == item.id?'active':'']" v-for="item in placeTypeList"
                            @click="handleChooseSelect('placeType',item)" class="" v-html="item.name"></a>
                    </dd>
                </dl>
                <dl class="for-park" v-show="query.type == 1"><!--办公室人数-->
                    <dt>人数</dt>
                    <dd>
                        <a href="javascript:;" :class="[query.officeCapacity == item.id?'active':'']" v-for="item in capacityList"
                            @click="handleChooseSelect('capacity',item)" class="" v-html="item.name" class="">科技</a>
                    </dd>
                </dl>
                <dl class="for-park" v-show="query.type == 3"><!--场地人数-->
                    <dt>人数</dt>
                    <dd>
                        <a href="javascript:;" :class="[query.roadCapacity == item.id?'active':'']" v-for="item in capacityList"
                            @click="handleChooseSelect('capacity',item)" class="" v-html="item.name" class="">科技</a>
                    </dd>
                </dl>
                <dl v-show="query.type == 2"><!--工位价格-->
                    <dt>单价（元/m²·天）</dt>
                    <dd>
                        <a :class="[query.spacePrice == item.id?'active':'']" v-for="item in priceList" href="javascript:;"
                            class="" v-html="item.name" @click="handleChooseSelect('price',item)"></a>
                    </dd>
                </dl>
                <dl v-show="query.type == 1"><!--办公间价格-->
                    <dt>单价（元/m²·天）</dt>
                    <dd>
                        <a :class="[query.officePrice == item.id?'active':'']" v-for="item in priceList" href="javascript:;" class=""
                            v-html="item.name" @click="handleChooseSelect('price',item)"></a>
                    </dd>
                </dl>
                <dl>
                    <dt>品牌</dt>
                    <dd>
                        <a :class="[query.brandId == item.brandId?'active':'']" v-for="item in hotBrandList" href="javascript:;" class=""
                            v-html="item.brandName" @click="handleChooseSelect('brand',item)"></a>
                    </dd>
                </dl>
                <dl>
                    <dt>热搜标签</dt>
                    <dd>
                        <a :class="[query.labelId == hotsearch.tagId?'active':'']" v-for="hotsearch in hotsearchList"
                            href="javascript:;" v-html="hotsearch.keyword" @click="handleChooseSelect('hot',hotsearch)"></a>
                    </dd>
                </dl>
            </div>
            <div class="select-button">
                <a href="javascript:;" class="blue" @click="reset">重置</a>
                <a href="javascript:;" @click="search()">确定</a>
            </div>
        </div>
        <div class="all-list second-list-type aui-content " v-if="brandList.length>0">
            <p class="count">共有<span>{{total}}</span>品牌</p>
            <dl class="aui-margin-t-10" v-for="brand in brandList" :key='brand.brandId'>
                <dt style="position:relative;">
                    <div class="aui-clearfix aui-list-item-arrow">
                        <div class="aui-pull-left" style="text-align:left;width:57%;">
                            <div  @click="goDetail(brand)">
                                <h4 class="title" style="font-size:.8rem;display: inline;" >{{brand.brandName}}</h4>
                            </div>
                            <p style="font-size:.6rem;">
                                <small>{{forDate(brand.updateTime)}}</small>&nbsp;&nbsp;<small>更新</small>&nbsp;&nbsp;<small>浏览量{{countVisitNum[$index]}}</small></p>
                        </div>
                        <div class="aui-pull-right tao-num" style="width:43%;">
                            <big>{{brand.minPrice}}</big>元·人/月起
                        </div>
                    </div>
                </dt>
                <dd>
                    <div class="out"  v-for="community in brand.communityList" :key='community.communityId' v-if="$index<4" @click='goCommunityDetail(community)'>
                        <div class="more-house-list">
                            <div class="pic">

                                <img :src="community.imgUrl?community.imgUrl:'../../common/images/noupload.png'">
                                <p class="position-des aui-ellipsis-1">
                                    <small>{{community.town}}-{{community.tradingArea}}</small>
                                </p>
                            </div>
                            <div class="remark aui-clearfix">
                                <div class="line-1 aui-ellipsis-1">{{community.communityName}}</div>
                                <div class="aui-info">
                                    <div class="aui-info-item"><big>{{community.price}}</big><small> 元·人/月起</small></div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div style="color: #757575;font-size: 0.6rem;padding: 0.5rem 0 0 0.15rem;">
                        <span style="color: #464b5d;" @click='goBrandMore(brand.brandId)'>查看更多>></span>    
                    </div> 
                </dd>
            </dl>
            <div class="loadMore">
                <div class="aui-btn aui-btn-sm aui-btn-primary " v-if="more" @click="loadMore">更多品牌</div>
                <small v-else>已加载全部</small>
            </div>
        </div>
        <div class="all-list aui-content" v-else>
            <img src="../../common/images/no-result.svg" style="display: block;margin: 3rem auto;">       
        </div>
    </div>
    <!-- <div class="aui-content-padded">
        <div class="dibu-qrcode">
            <div class="bottom-line">
                <h5>关注公众号，选址更方便</h5>
                <div class="bg-line"></div>
            </div>
            <img src="../../common/images/qrcode.svg">
        </div>
        <footer>
            <img src="../../common/images/union/footer.svg" style="width:70%;">
        </footer>
    </div> -->
    <a class="back-to-top" href="javascript:;">
        <img src="../../common/images/totop.svg">
    </a>
    <script type="text/javascript">
        $(document).ready(function () {
            //回到顶部
            window.onscroll = function () {
                var scrollTop = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop;
                if (scrollTop >= 100) {
                    $('.back-to-top').fadeIn();
                } else {
                    $('.back-to-top').fadeOut();
                }
            }
            $('.back-to-top').click(function () { $('html,body').animate({ scrollTop: '0px' }, 500); });
            new BScroll("#choose-area>#left-area", {
                click: true,
                scrollY: true
            });
            new BScroll("#choose-area>#right-area", {
                click: true,
                scrollY: true
            });
            new BScroll("#choose-subway>#left-area", {
                click: true,
                scrollY: true
            });
            new BScroll("#choose-subway>#right-area", {
                click: true,
                scrollY: true
            });
            //筛选条件切换
            // $("#all-select li").on("click", function() {
            // if ($(this).hasClass("active")) {
            //     $(this).removeClass("active");
            //     $(".third-info").hide(100);
            //     $(".all-list").show(100);
            // } else {
            //     $("#all-select li").removeClass("active");
            //     $(this).addClass("active");
            //     var aimDom = $(this).attr("data-type");
            //     $(".third-info").hide();
            //     $(".all-list").hide(100);
            //     $("#" + aimDom).show(300);
            // }
            // });
            $("#all-select li").on("click", function() {
                var aimDom = $(this).attr("data-type");
                if( $("#" + aimDom).css('display') == 'none'){
                    $(".third-info").hide();
                    $(".all-list").hide(100);
                    $("#" + aimDom).show(300);
                }else{
                    $(".third-info").hide(100);
                    $(".all-list").show(100);
                    $("#" + aimDom).hide(300);
                }
            });
            //排序
            $(".sort-list").on("click", 'a',function() {
                if ($(this).hasClass("active")) { 
                    $(this).removeClass("active");
                }else{
                    $(this).addClass("active").parent().siblings().children('a').removeClass('active');            
                }
                $(".third-info").hide();
                $(".all-list").show(100);
            });
        })
    </script>
</body>

</html>